<div id="app">
  <nz-progress
    *ngIf="loadPercent < 100"
    nzStrokeWidth="5"
    [nzShowInfo]="false"
    nzStatus="active"
    [nzPercent]="loadPercent"></nz-progress>
  <nz-layout class="layout">
    <nz-header class="header">
      <div class="wrap">
        <div class="left">
          <h1>网易云音乐</h1>
          <ul nz-menu nzTheme="dark" nzMode="horizontal">
            <li
              nz-menu-item
              *ngFor="let menu of menus"
              [nzSelected]="menu.label === routeTitle"
              [routerLink]="menu.path"
            >{{menu.label}}</li>
          </ul>
        </div>
        <div class="right">
          <app-wyy-search
            [searchResult]="searchResult"
            (onSearch)="searchKeyWords($event)"></app-wyy-search>
          <div class="member">
            <div class="no-login" *ngIf="!user; else logined">
              <ul nz-menu nzTheme="dark" nzMode="horizontal">
                <li nz-submenu>
                  <div title>
                    <span>登录</span>
                    <i nz-icon type="down" nzTheme="outline"></i>
                  </div>
                  <ul>
                    <li nz-menu-item (click)="openModal('loginByPhone')">
                      <i nz-icon type="mobile" nzTheme="outline"></i>
                      手机号登录
                    </li>
                    <li nz-menu-item (click)="openModal('register')">
                      <i nz-icon type="user-add" nzTheme="outline"></i>
                      注册
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <ng-template #logined>
              <div class="login">
                <ul nz-menu nzTheme="dark" nzMode="horizontal">
                  <li nz-submenu>
                    <div title>
                      <nz-avatar
                        nzIcon="user"
                        [nzSrc]="user.profile.avatarUrl"
                        [ngStyle]="{ margin: '0 5px 0 0' }"></nz-avatar>
                      <i nz-icon nzType="down" nzTheme="outline"></i>
                    </div>
                    <ul>
                      <li nz-menu-item [routerLink]="['/member', user.profile.userId]">
                        <i nz-icon nzType="user" nzTheme="outline"></i>我的主页
                      </li>
                      <li nz-menu-item (click)="onLogout()">
                        <i nz-icon nzType="close-circle" nzTheme="outline"></i>退出登录
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </ng-template>
          </div>
        </div>
      </div>
    </nz-header>
    <nz-content class="content">
      <router-outlet></router-outlet>
    </nz-content>
    <nz-footer class="footer">
      网易公司版权所有 ©1997-2025
    </nz-footer>
  </nz-layout>
</div>
<app-wyy-player [user]="user"></app-wyy-player>
<!-- 不同类型模态框 -->
<app-wyy-layer-modal
  [visible]="modalVisible"
  [currentModalType]="currentModalType"
  (showSpin)="showSpin"
  (onLoadSheets)="onLoadSheets()">
  <app-wyy-layer-login
    name="login"
    [visible]="modalVisible"
    [wyyRemLogin]="wyyLoginParams"
    (onLogin)="userLogin($event)"
    (onChangeModalType)="changeModalType($event)"
  ></app-wyy-layer-login>
  <app-wyy-layer-like
    name="like"
    [visible]="modalVisible"
    [likedId]="likedId"
    [mySheets]="userSheets"
    (onLikeSong)="onLikeSong($event)"
    (createSheet)="createSheet($event)"
    (onChangeModalType)="changeModalType($event)"
  ></app-wyy-layer-like>
  <app-wyy-layer-register
    name="register"
    [visible]="modalVisible"
    (onRegister)="RegisterAccount($event)"
    (onChangeModalType)="changeModalType($event)"
  ></app-wyy-layer-register>
  <app-wyy-layer-share
    name="share"
    [visible]="modalVisible"
    [shareInfo]="shareInfo"
    (onShare)="onShare($event)"
    (onCancelShare)="cancelShare()"
    (onChangeModalType)="changeModalType($event)"
  ></app-wyy-layer-share>
  <app-wyy-layer-default
    [qrCodeImg]="qrCodeImg"
    (onChangeModalType)="changeModalType($event)"
  ></app-wyy-layer-default>
</app-wyy-layer-modal>

<nz-back-top [nzTemplate]="tpl">
  <ng-template #tpl>
    <div class="ant-back-top-inner">
      <button nz-button nzType="primary" nzSize="large">
        <i nz-icon nzType="to-top" nzTheme="outline"></i>
      </button>
    </div>
  </ng-template>
</nz-back-top>
